<%--
  Created by IntelliJ IDEA.
  User: Tian
  Date: 2024/3/14
  Time: 18:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
  <script src="/js/echarts.js"></script>
  <%--引入vue的js--%>
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <%--引入element的js--%>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="/js/axios.min.js"></script>
  <%--引入elementui的样式--%>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <div id="main" style="width: 600px;height:400px;">

  </div>
</div>

</body>
<script>
  let app=new Vue({
    el:"#app",
    created(){
      this.initEcharts();
    },
    data:{
       xdatas:[],
       ydatas:[],
    },
    methods:{
      initEcharts(){
        axios.get("/echart/demo01").then(result=>{
          for (let i = 0; i <result.data.length ; i++) {
              this.xdatas.push(result.data[i].dname)
              this.ydatas.push(result.data[i].count)
          }
          var myChart = echarts.init(document.getElementById('main'));
          myChart.setOption({
            title: {
              text: '部门员工人数'
            },
            tooltip: {},
            legend: {
              data: ['部门']
            },
            xAxis: {
              data: this.xdatas
            },
            yAxis: {},
            series: [
              {
                name: '人数',
                type: 'bar',
                data: this.ydatas
              }
            ]
          })
        })
      }
    }
  })
</script>
</html>